<template>
  <div class="check-list" @click="eventClick('detail')">
    <div class="item-title">
      <span class="title-text">
        {{ checkItem.name || checkItem.checkStandardName || "" }}
      </span>
      <span class="title-check" v-if="isStandard">
        风险点：{{
          +checkItem.normalNum + +checkItem.noNormalNum + +checkItem.abnormalNum
        }}
        /
        {{ checkItem.amount }}
      </span>
      <div v-if="!isStandard">
        <template v-if="checkItem.type">
          <span
            class="title-tip"
            style="text-align: right;"
            :key="index"
            v-for="(item, index) in planType"
            >{{ item }}</span
          >
        </template>
      </div>
    </div>
    <div class="item-body">
      <div class="body-tag">
        <img
          src="@/assets/icon/safety_controlled.svg"
          alt=""
          style="width:15px;height:16px;margin-right:6px"
        />
        正常：{{ checkItem.normalNum || 0 }}
      </div>
      <div class="body-tag">
        <img
          src="@/assets/icon/safety_warning.svg"
          alt=""
          style="width:15px;height:16px;margin-right:6px"
        />
        异常：{{ checkItem.troubleNum || checkItem.abnormalNum || 0 }}
      </div>
      <div class="body-tag">
        <img
          src="@/assets/icon/safety_noting.svg"
          alt=""
          style="width:16px;height:16px;margin-right:6px"
        />
        未完成：{{ checkItem.executeSum || 0 }}
      </div>
      <div class="body-tag">
        <template v-if="isStandard">
          <template v-if="checkItem.isAccomplish && checkDateil.status == 11">
            已完成
          </template>
          <template
            v-else-if="checkItem.isAccomplish && checkDateil.status != 11"
          >
            {{ checkDateil.status | standardText }}
          </template>
          <template v-else-if="!checkItem.isAccomplish">
            {{ checkDateil.status == 12 ? "已逾期" : "未完成" }}
          </template>
        </template>
        <template v-else>
          <!-- <template v-if="!isStandard">
            {{ checkItem.status | standardText }}
          </template> -->
          <div @click.stop="eventClick('open')">
            展开
          </div>
        </template>
        <x-icon
          type="ios-arrow-down"
          v-if="showStandard"
          fill="#fff"
          size="14"
        ></x-icon>
        <x-icon type="ios-arrow-right" v-else fill="#fff" size="14"></x-icon>
      </div>
    </div>
    <div class="item-child" v-if="isStandard && showStandard">
      <div class="child-body">
        <div
          class="child-list"
          v-for="item in standardItem"
          :key="item.id"
          @click.stop="eventClickStandardItem(item)"
        >
          <img
            v-if="item.type == 1"
            src="@/assets/icon/safety_controlled.svg"
            alt=""
            style="width:15px;height:16px;margin-right:6px"
          />
          <img
            v-else-if="item.type == 2 || item.type == 3"
            src="@/assets/icon/safety_warning.svg"
            alt=""
            style="width:15px;height:16px;margin-right:6px"
          />
          <img
            v-else-if="item.type == 0"
            src="@/assets/icon/safety_noting.svg"
            alt=""
            style="width:16px;height:16px;margin-right:6px"
          />
          <span class="list-text"> {{ item.checkStandardItemName }}</span>
          <template
            v-if="
              checkItem.status == 1 &&
                checkDateil &&
                checkDateil.userIds.includes(user.id || 0)
            "
          >
            <x-icon type="ios-arrow-right" fill="#fff" size="14"></x-icon>
          </template>
        </div>
        <div class="detail-btn">
          <div
            class="btn"
            v-if="checkItem.isAccomplish == 1 && +checkItem.abnormalNum"
            @click.stop="eventDetail('trouble')"
          >
            查看隐患
          </div>
          <div
            class="btn"
            v-if="
              isStandard &&
                checkItem.isAccomplish == 0 &&
                checkDateil &&
                checkDateil.userIds.includes(user.id || 0)
            "
            @click.stop="eventDetail('submit')"
          >
            提交
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      planTypeArr: ["日常", "专项", "综合", "现场", "资料"],
      show: false
    };
  },
  props: {
    checkItem: {
      type: Object,
      default: () => {
        return {};
      }
    },
    showStandard: {
      type: Boolean,
      default: false
    },
    isStandard: {
      type: Boolean,
      default: false
    },
    itemChild: {
      type: Boolean,
      default: true
    },
    titleCheck: {
      type: Boolean,
      default: true
    },
    showDone: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    user() {
      return this.$store.state.user;
    },
    checkDateil() {
      return this.$store.state.safetyCheck.details;
    },
    standardItem() {
      if (this.checkItem.items) {
        return this.checkItem.items;
      }
      return [];
    },
    planType() {
      if (!this.isStandard && this.checkItem && this.checkItem.type) {
        return this.checkItem.type.split(",").map(e => this.planTypeArr[e - 1]);
      }
      return [];
    }
  },
  filters: {
    standardText(val) {
      let text = "未完成";
      if (val === 11) {
        text = "未完成";
      } else if (val === 13) {
        text = "已完成";
      } else if (val === 12) {
        text = "已逾期";
      } else if (val === 14) {
        text = "逾期已完成";
      }
      return text;
    }
  },
  activated() {},
  methods: {
    eventDetail(tag) {
      this.$emit("eventDetail", this.checkItem, tag);
    },
    eventClick(tag) {
      this.$emit("eventCheckList", this.checkItem, this.isStandard, tag);
    },
    eventClickStandardItem(item) {
      // console.log(item);
      this.$emit("eventStandardItem", this.checkItem, item);
    }
  }
};
</script>
<style lang="less" scoped>
.check-list {
  padding: 8px;
  height: auto;
  min-height: 80px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  background-color: #292a4d;
  border-radius: 4px;
  .ellipsis {
    display: inherit !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .item-title {
    font-size: 17px;
    color: #fff;
    // overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: keep-all;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    &.overdue {
      justify-content: flex-start;
    }
    .tag {
      color: #4266d6;
      float: right;
      font-size: 15px;

      &.yollow {
        color: #dd9710;
      }
      &.redy {
        color: #f56c6c;
      }
      &.green {
        color: #67c23a;
      }
    }
    .title-label {
      margin-left: -8px;
      border-radius: 20px;
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
      font-size: 14px;
      padding: 0 12px 1px 8px;
      background-color: #456de6;
      margin-right: 8px;
    }
    .title-text {
      margin-right: 8px;

      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .title-check {
      font-size: 14px;
    }
    .title-tip {
      width: 100%;
      font-size: 14px;
      padding: 1px 4px 2px;
      border-radius: 4px;
      margin-left: 4px;
      font-size: 13px;
      background-color: #456de6;
      &.status {
        color: #456de6;
      }
      &.status1,
      &.status4 {
        color: #4fa8e7;
      }
      &.status3 {
        color: #456de6;
      }
      &.status5 {
        color: #dd9710;
      }
      &.status9,
      &.status7 {
        color: #dd9710;
      }
      // &.green {
      //   color: #67c23a;
      // }
      // &.gray {
      //   color: #999;
      // }
    }
  }
  .item-body {
    // color: #456de6;
    font-size: 16px;
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    .body-tag {
      font-size: 14px;
      display: flex;
      align-items: center;
    }
    .item-show {
      color: #fff;
      font-size: 14px;
      width: 52px;
      padding: 1px 0;
      flex: none;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 80px;
      border: 1px solid #456de6;
    }
  }
  .item-body-other {
    color: rgba(255, 255, 255, 0.6);
  }
  .item-bottom {
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    .child-body-state {
      margin-left: 8px;
      padding: 0 2px 1px;
      color: #456de6;
      border: 1px solid #456de6;
      border-radius: 2px;
    }
    .handle-btn {
      margin-left: 8px;
      flex: none;
    }
    .btn {
      color: #fff;
      font-size: 14px;
      background-color: #456de6;
      padding: 2px 11px 3px;
      border-radius: 12px;
    }
  }
  .item-child {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    padding-bottom: 6px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    .child-title {
      color: #fff;
      // overflow: hidden;
      font-size: 16px;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: keep-all;
      display: flex;
      align-items: center;
      // justify-content: space-between;

      .child-label {
        font-size: 14px;
        margin-right: 8px;
        padding: 0 6px 1px;
        color: #fff;
        border: 1px solid #456de6;
        border-radius: 2px;
      }
      .child-tip {
        width: 100%;
        margin-right: 8px;
        font-size: 14px;
        &.status {
          color: #dd9710;
        }
        &.status {
          color: #456de6;
        }
        &.status1,
        &.status4 {
          color: #4fa8e7;
        }
        &.status3 {
          color: #456de6;
        }
        &.status5 {
          color: #dd9710;
        }
        &.status9,
        &.status7 {
          color: #dd9710;
        }
      }
    }

    .child-body {
      font-size: 14px;
      margin: 4px 0;
      display: flex;
      flex-direction: column;
      // align-items: center;
      // justify-content: space-between;
      .child-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 6px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
        .list-text {
          width: 100%;
          padding: 0 8px;
        }
      }
      .detail-btn {
        width: 100%;
        // padding: 6px;
        // margin-top: 16px;
        .btn {
          width: 100px;
          margin: 12px auto 0;
          padding: 6px 0;
          font-size: 14px;
          color: #ffffff;
          text-align: center;
          background: #3967dc;
          border-radius: 5px;
        }
      }
      .child-body-state {
        margin-left: 8px;
        padding: 0 2px 1px;
        color: #456de6;
        border: 1px solid #456de6;
        border-radius: 2px;
      }
      &.handle {
        justify-content: space-between;
        color: #fff;
      }
    }
    .handle-btn {
      margin-left: 8px;
      flex: none;
    }
    .btn {
      color: #fff;
      font-size: 14px;
      background-color: #456de6;
      padding: 2px 11px 3px;
      border-radius: 12px;
    }
  }
  .their {
    font-size: 14px;
    color: #fff;
  }
  .more  {
    display: -webkit-box !important;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .time {
    font-size: 14px;
    color: rgba(69, 109, 230, 1);
  }
  .newpage_work_more {
    height: 40px;
    font-size: 12px;
    line-height: 40px;
    text-align: center;
    color: #456de6;
  }
}
</style>
